<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">-->
    <link rel="stylesheet" href="bootstrap.min.css">
    <link rel="stylesheet" href="app.css">
</head>
<body>
<!--导航-->
<div class="side-nav" role="navigation">
    <ul class="nav-side-nav">
        <li><a href="#onepage" class="tooltio-side-nav"></a></li>
        <li><a href="#twopage" class="tooltio-side-nav"></a></li>
        <li><a href="#threepage" class="tooltio-side-nav"></a></li>
        <li><a href="#fourpage" class="tooltio-side-nav"></a></li>
        <li><a href="#five" class="tooltio-side-nav"></a></li>
    </ul>
</div>

<!--    第一页-->
    <div class="onepage" id="onepage">
        <div class="onepage-bg" id="onepagebg"></div><!-- 背景图片 -->
        <div class="container" >
            <div class="row">
                <div class="title-text">
                    <div class="col-md-12 headfontsize ">
                        <h1 class="headh1content">
                            骇客学院 <br>
                            在这里你不可以学习 <br>
                            到你想要的
                        </h1>
                        <p style="margin-top: 30px;line-height: 33px">只要你有耐心，相信程序对你而言，难得一批，你不可能顺利拿下的</p>
                        <p class="btn-app-store" style="margin-top: 20px;">
                            <a href="#" class="btn btn-success btn-lg">立即注册，开始崩溃</a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
<!--        第二页-->
    <div class="twopage" id="twopage">
        <!-- 第一行字 -->
        <div class="twopage-text" >
            <h1 class="twopage-text-h1">
                选择你的第一节崩溃课进行学习 <img src="images/Androidicon.png">
            </h1>
        </div>
        <!-- 第二行中的三图 -->
        <div class="row">
            <div class="twopage-courses col-md-4 ">
                <a href="#">
                    <img src="images/2d.jpg" style="width: 100%;"><!-- 左背景图 -->
                    <div class="classicon"><!--图中文字-->
                        <h3>学个毛</h3>
                        <h1><strong>打游戏去吧</strong></h1>
                    </div>
                </a>
            </div>
            <div class="twopage-courses col-md-4 ">
                <a href="#">
                    <img src="images/screct.jpg" style="width: 100%;"><!-- 左背景图 -->
                    <div class="classicon"><!--图中文字-->
                        <h3>学个毛</h3>
                        <h1><strong>打游戏去吧</strong></h1>
                    </div>
                </a>
            </div>
            <div class="twopage-courses col-md-4 ">
                <a href="#">
                    <img src="images/2048.jpg" style="width: 100%;"><!-- 左背景图 -->
                    <div class="classicon"><!--图中文字-->
                        <h3>学个毛</h3>
                        <h1><strong>打游戏去吧</strong></h1>
                    </div>
                </a>
            </div>
        </div>
        <!-- 第三行按钮 -->
        <div class="twopagebtn">
            <a href="#" id="twopage-easy" class="btn btn-success btn-lg">
                如果你想死亡，快快点这里
            </a>
        </div>
    </div>

<!--第三页-->
    <div class="threepage" id="threepage">
        <div class="threepage-bg" id="threepagebg">
            <div class="threepagecontent">
                <div class="threepagetext">
                    <h1>为什么要学习编程思想?</h1>
                    <p>不就是想进BAT卖命拿钱吗？！</p>
                </div>
                <a href="#" class="btn btn-success btn-lg threepagebtncontent">快速注册</a>
            </div>
        </div>
    </div>

<!--第四页-->
    <div class="fourpage" id="fourpage">
        <div class="container" style="width: 70%">
            <div class="coursedetails-text">
                <h1>工欲善其事，必先利其器</h1>
                <p>怎样才能做到最快速的学习呢?量子阅读</p>
            </div>
            <div id="carousel-example-generic" class="carousel slide" data-interval="5000" style="height: 300px">
                <ol class="carousel-indicators" style="margin-top: 200px">
                    <li data-target="#carousel-example-generic" data-slide="0" class="active"></li>
                    <li data-target="#carousel-example-generic" data-slide="1"></li>
                    <li data-target="#carousel-example-generic" data-slide="2"></li>
                </ol>
                <div class="carousel-inner">
                    <div class="item active" style="width: 500px">
                        <img src="images/four-2-1.png" alt="">
                    </div>
                    <div class="item" style="width: 500px">
                        <img src="images/four-2-1.png" alt="">
                    </div>
                    <div class="item" style="width: 500px">
                        <img src="images/four-2-1.png" alt="">
                    </div>
                </div>
                <a href="#carousel-example-generic" class="left carousel-control" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left"></span>
                </a>
                <a href="#carousel-example-generic" class="right carousel-control" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right"></span>
                </a>
            </div>
        </div>
    </div>


<!--第五页-->
    <div class="fivepage" id="five">
        <div class="fivepage-bg" id="fivepage">
            <div class="container">
                <div class="footertext">
                    <h1>你还在等待呢。赶紧动废手吧！</h1>
                </div>
                <div class="footerbtncenter">
                    <div class="row">
                        <a href="#">
                            <div class="col-md-4">
                                <img src="images/five-2-1.png" class="footerbtn queyeicon">
                            </div>
                        </a>
                        <a href="#">
                            <div class="col-md-4">
                                <img src="images/five-2-2.png" class="footerbtn queyeicon">
                            </div>
                        </a>
                        <a href="#">
                            <div class="col-md-4">
                                <img src="images/five-2-3.png" class="footerbtn queyeicon">
                            </div>
                        </a>
                    </div>
                </div>
                <div class="footertextbtn">
                    <button class="btn btn-success btn-lg" style="font-size: 25px;">
                        你还在看?看锤子,点啊
                    </button>
                    <p class="footertextbtn-text">
                        看到这？你学废了吗？给我点个星星？
                    </p>
                </div>
            </div>
        </div>
    </div>

</body>
</html>
